---
slug: /components/balloon-toolbar
title: Balloon Toolbar
---

```ts live
() => {
  const BallonToolbarMarks = () => {
    const editor = useStoreEditorRef(useEventEditorId('focus'));

    const arrow = false;
    const theme = 'dark';
    const direction = 'top';
    const hiddenDelay = 0;
    const tooltip = {
      arrow: true,
      delay: 0,
      duration: [200, 0],
      hideOnClick: false,
      offset: [0, 17],
      placement: 'top',
    };

    return (
      <BalloonToolbar
        direction={direction}
        hiddenDelay={hiddenDelay}
        theme={theme}
        arrow={arrow}
      >
        <ToolbarMark
          type={getPlatePluginType(editor, MARK_BOLD)}
          icon={<FormatBold />}
          tooltip={{ content: 'Bold (⌘B)', ...tooltip }}
        />
        <ToolbarMark
          type={getPlatePluginType(editor, MARK_ITALIC)}
          icon={<FormatItalic />}
          tooltip={{ content: 'Italic (⌘I)', ...tooltip }}
        />
        <ToolbarMark
          type={getPlatePluginType(editor, MARK_UNDERLINE)}
          icon={<FormatUnderlined />}
          tooltip={{ content: 'Underline (⌘U)', ...tooltip }}
        />
      </BalloonToolbar>
    );
  }

  const componentsPlaceholder = withStyledPlaceHolders(components);

  return (
    <>
      <BallonToolbarMarks />
      <Plate
        id="balloon-toolbar"
        plugins={pluginsBasic}
        components={components}
        options={options}
        editableProps={editableProps}
        initialValue={initialValueBalloonToolbar}
      />
    </>
  );
}
```